<template>
  <div>
    <div class="footer_service">
      <ul>
        <li class="noBorder"><a href="#">加入我们</a></li>
        <li><a href="#">预约上门</a></li>
        <li><a href="#">7天无理由退货</a></li>
        <li><a href="#">15天免费换货</a></li>
        <li><a href="#">满69元包邮</a></li>
      </ul>
    </div>
    <div class="footer_links">
      <dl class="col-links">
        <dt></dt>
      </dl>
      <dl class="col-links">
        <dt>选购指南</dt>
        <dd><a href="#">食品饮料</a></dd>
        <dd><a href="#">粮油副食</a></dd>
        <dd><a href="#">个人护理</a></dd>
        <dd><a href="#">护肤美妆</a></dd>
        <dd><a href="#">家居清洁</a></dd>
        <dd><a href="#">母婴用品</a></dd>
        <dd><a href="#">中外名酒</a></dd>
        <dd><a href="#">清一色生鲜</a></dd>
        <dd><a href="#">居家生活</a></dd>
      </dl>
      <dl class="col-links">
        <dt>服务中心</dt>
        <dd><a href="#">申请售后</a></dd>
        <dd><a href="#">售后政策</a></dd>
        <dd><a href="#">更换服务价格</a></dd>
        <dd><a href="#">订单查询</a></dd>
        <dd><a href="#">以旧换新</a></dd>
        <dd><a href="#">保障服务</a></dd>
        <dd><a href="#">防伪查询</a></dd>
      </dl>
      <dl class="col-links">
        <dt>线下门店</dt>
        <dd><a href="#">清一色之家</a></dd>
        <dd><a href="#">服务网点</a></dd>
        <dd><a href="#">体验店</a></dd>
      </dl>
      <dl class="col-links">
        <dt>关于我们</dt>
        <dd><a href="#">了解我们</a></dd>
        <dd><a href="#">加入我们</a></dd>
        <dd><a href="#">投资者关系</a></dd>
        <dd><a href="#">廉洁举报</a></dd>
      </dl>
      <dl class="col-links">
        <dt>关注我们</dt>
        <dd><a href="#">新浪微博</a></dd>
        <dd><a href="#">官方微信</a></dd>
        <dd><a href="#">联系我们</a></dd>
        <dd><a href="#">公益基金会</a></dd>
      </dl>
      <div class="col-contact">
        <p class="phone">800-820-8820</p>
        <p>8:80-18:00(仅收市话费)</p>
        <a href="#" class="btn-line-primary btn-small btn">
          人工客服
          <em>
            <el-icon :size="15" >
              <ChatDotRound />
            </el-icon>
          </em>
          
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import { ChatDotRound } from "@element-plus/icons";
export default {
  components: {
    ChatDotRound,
  },
};
</script>

<style scoped>
.footer_service {
  margin-bottom: 20px;
  padding: 27px 0;
  border-bottom: 1px solid #e0e0e0;
}
.footer_service ul {
  display: block;
  height: 25px;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}
li {
  list-style-type: none;
  float: left;
  width: 19.8%;
  height: 25px;
  font-size: 16px;
  line-height: 25px;
  text-align: center;
}
.footer_service ul li {
  border-left: 1px solid #e0e0e0;
}
.noBorder {
  border: none !important;
}
li a {
  color: #616161;
  transition: color 0.2s;
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0);
}
a:hover {
  text-decoration: none;
  color: #ff6700;
}
.footer_links {
  padding: 40px 0;
}
dl {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
dt {
  display: block;
}
.footer_links .col-links {
  float: left;
  width: 160px;
  margin: 0;
  margin-left: 11px;
}
.footer_links .col-links dt {
  margin: -1px 0 26px;
  font-size: 14px;
  line-height: 1.25;
  color: #424242;
  text-align: left;
}
dd {
  display: block;
  margin-inline-start: 40px;
}
.col-links dd {
  margin: 10px 0 0;
  font-size: 12px;
  text-align: left;
}
.col-links dd a {
  color: #757575;
}
.col-links dd a:hover {
  text-decoration: none;
  color: #ff6700;
}
a {
  text-decoration: none;
}
.col-contact {
  float: right;
  height: 100%;
  width: 251px;
  border-left: 1px solid #e0e0e0;
  text-align: center;
  color: #616161;
}
.col-contact .phone {
  font-size: 22px;
  line-height: 1;
  color: #ff6700;
}
.col-contact p {
  margin: 0 0 5px 0;
  font-size: 12px;
}
.btn-line-primary {
  border-color: #ff6700 !important;
  background: #fff;
  color: #ff6700 !important;
}
.btn-small {
  width: 118px !important;
  height: 28px !important;
  font-size: 12px !important;
  line-height: 28px;
}
.btn {
  display: inline-block;
  width: 158px;
  height: 38px;
  padding: 0;
  margin: 0;
  border: 1px solid #b0b0b0;
  font-size: 14px;
  text-align: center;
  color: #b0b0b0;
  cursor: pointer;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.col-contact a:hover {
  background-color: #ff6700;
  color: #fff !important;
}
</style>